<template>
	<view class="container">
		<navSearchBar title="全部需求" :hasSearch="true" :readonly="false" @conFirmSearch="topSearch" ref="topSearchRef"></navSearchBar>
		<view class="operate">
			<view class="left-item">
			<text>数量：</text>
			<text class="number">{{total}}</text>
			</view>
			<!-- <text class="tn-icon-filter" @click="openSearch"></text> -->
			<image src="/static/srceen.png" @click="openSearch"></image>
		</view>
		<view class="content">
			<view v-for="(item,index) in list" :key="index" class="list-item" @click=routerToDetail(item)>
				<view class="item-top">
					<text class="name">{{item.demand_type.text}}</text>
					<text>{{item.demand_time}}</text>
				</view>
				<view class="item-middle">
					<text>{{item.client.name}}</text>
					<image src="/static/personal/right.png"></image>
				</view>
				<view class="item-bottom">
					<text class="text-label">预估利润：</text><text>{{item.money}}元</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<tn-button shape="round" fontSize="32" fontBold backgroundColor="#3B54DA" fontColor="#FFFFFF" width="282rpx" height="72rpx" @click="addCustom">
				<!-- <text class="tn-icon-add"></text> -->
				+ 添加需求</tn-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total:0,
				list:[],
				currentPage:1,
				pageSize:20,
				searchData:{
					order:'',
					user_id:'',
					demand_year:'',
					demand_month:'',
					demand_type:'',
					demand_status:'',
					money:''
				},
			}
		},
		onLoad(){
			console.log('demadonLoad')
			
		},
		onPullDownRefresh(e){
			
		},
		onReachBottom(){
			console.log('onReachBottom')
			if(this.total > this.pageSize * this.currentPage){
				this.currentPage += 1;
				this.getList();
			}
		},
		onShow(){
			console.log('demadononShow')
			// this.clearSearchData();
			this.currentPage = 1;
			this.list = [];
			this.getList();
			if(!this.searchData.description){
				this.$refs.topSearchRef.setValue('');
			}
			
		},
		methods: {
			clearSearchData(){
				for(let key of Object.keys(this.searchData)){
					this.searchData[key] = '';
				}
			},
			getList(){
				this.$tip.loading();
				const reqData = {
					...this.searchData,
					page:this.currentPage,
					limit:this.pageSize,
				}
				this.$http.get('/api/business/demand/list',reqData).then((res) => {
					this.$tip.loaded()
					if(res.data.status == 200) {
						let list= res.data.data.data || [];
						this.list = this.list.concat(list);
						console.log('demad',this.list)
						this.currentPage = res.data.data.current_page||1;
						this.pageSize =  res.data.data.per_page||20;
						this.total = res.data.data.total||0;
					}
				})
			},
			addCustom(){
				this.$Router.push({name:'allDemandAdd'})
			},
			routerToDetail(item){
				this.$Router.push({name:'allDemandDetail',query:{id:item.id}})
			},
			openSearch(){
				this.$Router.push({name:'demandFilter',query:{
					searchData:this.searchData
				}})
			},
			topSearch(value){
				this.searchData.description = value;
				this.currentPage = 1;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.operate{
			z-index:1;
			height: 100rpx;
			padding:10rpx 20rpx 0;
			position: fixed;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #EFEFEF;
			width: 100%;
			align-items: center;
			.left-item{
				color:#6F6F6F;
				font-size: 24rpx;
				
				.number{
					font-size:28rpx;
					font-weight: $Semibold;
				}
				
			}
			image{
				width: 48rpx;
				height: 48rpx;
			}
			
		}
		.content{
			padding:130rpx 20rpx calc(112rpx + env(safe-area-inset-bottom));
			color:#6F6F6F;
			font-size: 24rpx;
			.list-item{
				margin-bottom: 20rpx;
				padding:20rpx 20rpx 42rpx;
				border-bottom: 2rpx solid #EFEFEF;
				.item-top{
					display: flex;
					justify-content: space-between;
					margin-bottom: 26rpx;
					.name{
						font-size: 32rpx;
						font-weight: $Semibold;
						color:#6F6F6F;
						line-height: 32rpx;
					}
				}
				.item-middle{
					margin-bottom: 26rpx;
					position: relative;
					display: flex;
					align-items: center;
					image{
						position: absolute;
						right: 20rpx;
						width: 10rpx;
						height: 20rpx;
					}
				}
				.item-bottom{
					
					color: #FF2323;
					.text-label{
						margin-right: 20rpx;
					}
				}
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			height: calc(112rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: center;
			background: #FFFFFF;
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			align-items: center;
			.button{
				
			}
			
		}
	}
</style>
